<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2d</title>
	<style>
		.on{width: 200px;height: 200px;background: gray;margin:100px auto;
			transform: scale(2);/*宽高都放大2倍,不改变占用空间*/
			transform: scale(2,1);/*宽2倍高1倍*/
			transform: translate(100px);/*往右平移100px  默认X轴*/
			transform: translateY(300px);/*往下平移100px  Y轴*/
			transform: translateX(200px) translateY(250px);/*先右平移200px 再下平移250px  有先后顺序*/
			transform: translate(200px,250px);/*同时进行平移*/
			transform: rotate(45deg);/*旋转 默认Z轴*/
			transform: rotateX(45deg);
			transform: rotateY(45deg);
			/*都是复合属性，可以写在一起*/
			transform: rotate3d(0,0,1,90deg);/*沿Z轴旋转90°(x,y,z,90deg)*/ 
			transform: translate3d(100px,50px,0);/*x平移100px y平移50px z平移0px*/
		}

	</style>
</head>
<body>
	<div class="on"></div>
	<script>console.log(document.getElementsByClassName('on')[0].offsetWidth)</script>
</body>
</html>